<template>
  <div class="container-table">
    <!-- 表格栏 -->
    <div class="table-box">
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        class="pagination"
        :size="page.size"
        layout="total, prev, pager, next, jumper"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>
  </div>
</template>
<script>
import page from '@/mixins/page'
import pagination from '@/components/pagination.vue'
import FastTable from '@/components/fast-table.vue'

export default {
  components: { FastTable, pagination },
  mixins: [page],
  props: { ids: String },
  name: 'table-transaction-record',
  data () {
    return {
      params: {
        uid: this.ids
      },
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.settingThe3rdPartTransactionNumber'),
            prop: 'transactionId',
            formatter: row => this.$format.strFormat(row.transactionId)
          },
          {
            label: this.$t('m.Users_Details_Type'),
            prop: 'type',
            formatter: row =>
            this.$format.strFormat(
              this.$format.stateFormat(row.type, this.optionsDealType)
            )
          },
          {
            label: this.$t('m.Payment_amount'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          {
            label: this.$t('m.settingPaymentMethod'),
            prop: 'paymentMethod',
            formatter: row => this.$format.strFormat(
              this.$format.stateFormat(row.paymentMethod, this.optionsPaymentMethod)
            )
          },
          {
            label: this.$t('m.Payment_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      },
      // 流水类型：1-租借 2-租金退款 3-会员 4-会员退款 5-押金 6-押金退款 7-罚金 8-罚金退款 9-添加卡 10-添加卡退款 11-优惠券 12-优惠券退款
      optionsDealType: [{ value: '', label: this.$t('m.all') }].concat(
        this.$dict.transfer.type
      ),
      // 支付方式
      optionsPaymentMethod: [{ value: '', label: this.$t('m.all') }].concat(
        this.$dict.transfer.paymentMethod
      )
    }
  },
  created () {
    // console.log(this.params)
    this.params = this.$options.data.call(this).params
    this.page = this.$options.data.call(this).page
    this.params.uid = this.ids
    this.getPage()
  },
  methods: {
    getPage () {
      this.$api.transfer.getPage(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container-table {
  .table-box {
    padding: 0 0 20px 0;
  }
  .pagination {
    ::v-deep .el-input__inner {
      padding: 0 3px !important;
      text-align: center;
    }
  }
}
</style>
